<template>
    <img @click="next" tabindex="0" class="theme" :src="themeIcon" alt="">
</template>
<script setup>
import { ref, computed } from 'vue';
import * as theme from '../theme'
const nowTheme = ref('auto');
theme.getTheme(theme => nowTheme.value = theme);
const themeIcon = computed(() => {
    return new URL(`../themeIcon/${nowTheme.value}.svg`, import.meta.url)
})
function next() {
    theme.setTheme(theme.themes[(theme.themes.indexOf(nowTheme.value) + 1) % theme.themes.length])
}
</script>
<style scoped lang="scss">
@import "../theme.scss";

.theme {
    width: 50px;
    border-width: 2px;
    border-style: solid;
    border-radius: 5px;
    cursor: pointer;
    border-color: transparent;
    &:focus {
        border-color: #888;
        outline: none;
    }
    &:hover{
        transform: scale(1.1);
    }
}
</style>